<template>
  <fieldset>
    <legend>缓存组件</legend>
    <button
      v-for="(btn, index) in btns"
      :key="index"
      @click="Btn = btn"
      :class="{ active: Btn === btn }"
    >
      {{ btn }}
    </button>
    <keep-alive include="tab1,tab2">
      <div :is="dynamic"></div>
    </keep-alive>
  </fieldset>
</template>
<script>
import tab1 from "./tab1";
import tab2 from "./tab2";
import tab3 from "./tab3";
export default {
  data() {
    return {
      btns: ["tab1", "tab2", "tab3"],
      Btn: "tab1",
    };
  },
  components: {
    tab1,
    tab2,
    tab3,
  },
  computed: {
    dynamic() {
      return this.Btn;
    },
  },
};
</script>
<style scoped>
.active {
  background-color: deepskyblue;
}
</style>
